<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">

	.main{
		width:1200px;
		height:300px;
		margin:0 auto;
		/*background:#ccc;*/
	}
	.left{
		padding:10px;
		width:570px;
		height:100%;
		/*background:#ff0;*/
		float:left;
		border:1px dashed #000;
	}
	.right{
		padding:10px;
		width:580px;
		height:100%;
		/*background:#00f;*/
		float:right;
		border:1px dashed #000;
	}
</style>
<body>
<div class="main">
	<div class="left">
		<p>用户名：</p>
		<p id='uid2'></p>
		<p>密码：</p>
		<p id='cod2'></p>
		<p>留言板:</p>
		<p id='tid2'></p>
	</div>
	<div class="right">
		<form>
		<p>用户名：</p>
		<p><input type="text" name="" placeholder='user1' id='uid'></p>
		<p>密码：</p>
		<p><input type="text" name="" id='cod'></p>
		<p>留言板:</p>
		<p><textarea id='tid'></textarea></p>
		<input type="submit" name="" value='ok'>			
		</form>
	</div>
</div>
</body>
<script type="text/javascript">
	uidobj=document.getElementById('uid');
	uid2obj=document.getElementById('uid2');
	uidobj.onkeyup=function(){
		val=this.value;
		uid2obj.innerHTML=val;
	}
	codobj=document.getElementById('cod');
	cod2obj=document.getElementById('cod2');
	codobj.onkeyup=function(){
		val=this.value;
		cod2obj.innerHTML=val;
	}	
	tidobj=document.getElementById('tid');
	tid2obj=document.getElementById('tid2');
	tidobj.onkeyup=function(){
		val=this.value;
		tid2obj.innerHTML=val;
	}

</script>
</html>